<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 顶部组件 -->
      <head-tool>
        <div slot="after">
          <el-button type="primary" @click="showAdd('0', '1')">
            <i class="el-icon-edit"></i> 添加菜单
          </el-button>
        </div>
      </head-tool>
      <!--  表格 -->
      <el-table border :data="tableData" row-key="id" default-expand-all>
        <el-table-column prop="name" label="菜单名称"> </el-table-column>
        <el-table-column prop="code" label="权限标识"> </el-table-column>
        <el-table-column prop="description" label="描述"> </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="{ row }">
            <!-- 因为如果是二级 就代表是按钮级别权限 就不能在添加权限了 -->
            <el-button
              v-if="row.type == 1"
              @click="showAdd(row.id, '2')"
              type="text"
              >添加</el-button
            >
            <el-button type="text" @click.stop="checkPerm(row.id)"
              >编辑</el-button
            >
            <el-button @click="delPerm(row.id)" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :title="title" :visible.sync="showDialog" @close="btnCancel">
        <!-- 表单 -->
        <el-form
          ref="perForm"
          :model="formData"
          :rules="rules"
          label-width="120px"
        >
          <el-form-item label="权限名称" prop="name">
            <el-input v-model="formData.name" style="width:90%" />
          </el-form-item>
          <el-form-item label="权限标识" prop="code">
            <el-input v-model="formData.code" style="width:90%" />
          </el-form-item>
          <el-form-item label="权限描述">
            <el-input v-model="formData.description" style="width:90%" />
          </el-form-item>
          <el-form-item label="开启">
            <el-switch
              v-model="formData.enVisible"
              active-value="1"
              inactive-value="0"
            />
          </el-form-item>
        </el-form>
        <el-row slot="footer" type="flex" justify="center">
          <el-col :span="6">
            <el-button size="small" type="primary" @click="save"
              >确定</el-button
            >
            <el-button size="small" @click="btnCancel">取消</el-button>
          </el-col>
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// 导入接口
import {
  getPermissionAll,
  delPermission,
  getPermissionDetails,
  updatePermission,
  addPermission
} from '@/api/permission'
// 导入递归函数
import { transToTreeData } from '@/utils/index'
export default {
  data () {
    return {
      // 表格绑定的数据
      tableData: [],
      // 表单绑定的数据
      formData: {},
      rules: {
        name: [
          { required: true, message: '权限名称不能为空', trigger: 'blur' }
        ],
        code: [{ required: true, message: '权限标识不能为空', trigger: 'blur' }]
      },
      showDialog: false // 对话框的显示与隐藏
    }
  },
  created () {
    //  调用封装的获取所有权限的函数
    this.getPermissionAll()
  },
  methods: {
    // 获取所有权限点
    async getPermissionAll () {
      //  调用封装的获取所有权限的接口
      let res = await getPermissionAll()
      // console.log(res)
      this.tableData = transToTreeData(res.data, '0')
      // console.log(this.tableData)
    },
    // 新增的点击事件
    showAdd (pid, type) {
      // 因为接口需要传递pid 和type
      // 当pid为0 type为1时 代表是一级权限 （页面权限）
      // 当pid为当前点击的权限id type为2时  就代表是2级权限 （按钮权限）
      // 所以在传递参数时  （新增一级 pid 和type 写死为 '0' 和 '1'）
      // 二级pid就是当前点击的这一列的id （row.id  type 为 '2' ）
      // 将传递过来的pid 和 type 赋值给formData
      this.formData.pid = pid
      this.formData.type = type
      //  显示对话框
      this.showDialog = true
    },
    // 删除的点击事件
    async delPerm (id) {
      try {
        // 确认框
        await this.$confirm('您确定要删除此权限点吗', '温馨提示')
        // 能走到下面代码说明点击了确定
        // 调用删除权限点接口
        await delPermission(id)
        // 消息提示
        this.$message.success('删除权限点成功')
        // 重新加载页面 (重新获取所有权限点)
        this.getPermissionAll()
        // console.log(res)
      } catch (error) {
        console.log(error)
      }
    },
    // 取消按钮的点击事件
    btnCancel () {
      //清空表单内容
      this.formData = {
        name: '', // 名称
        code: '', // 标识
        description: '', // 描述
        type: '', // 类型 该类型 不需要显示 因为点击添加的时候已经知道类型了
        pid: '', // 因为做的是树 需要知道添加到哪个节点下了
        enVisible: '0' // 开启
      }
      // 关闭对话框
      this.showDialog = false
      // 清空校验规则
      this.$refs.perForm.resetFields()
    },
    // 确定按钮的点击事件
    save () {
      this.$refs.perForm.validate(async v => {
        if (v) {
          // 全部通过验证 就要发送新增请求
          if (this.formData.id) {
            // 如果有id 就是查看 调用更新接口
            await updatePermission(this.formData)
            // console.log(res)   无异常
          } else {
            await addPermission(this.formData)
          }
          // 弹窗提示
          this.$message.success(`${this.title}成功`)
          // 关闭对话框
          this.showDialog = false
          // 重新获取最新数据
          this.getPermissionAll()
        }
      })
    },
    // 编辑按钮的点击事件
    async checkPerm (id) {
      // 根据id获取权限详情
      let res = await getPermissionDetails(id)
      // 将数据绑定给formData  因为表单中的输入框绑定的formdata  所以表单中也就会有数据
      this.formData = res.data
      // 显示对话框
      this.showDialog = true
    }
  },
  //计算属性
  computed: {
    // 标题的显示
    title () {
      return this.formData.id ? '编辑权限' : '新增权限'
    }
  }
}
</script>

<style></style>
